/*
 *	JSON数据生成
 *	by cm.yu
 */
$(function () {
	//设置结构高度
	var win = $(window),
		$dataCright = $('.dataC-right'),	//right主结构
		windowH = win.height(),				//浏览器高度
		$addParam = $('.add-param'),		//添加变量
		$creatData = $('.creatData'),		//生成数据结构按钮
		$dataBox = $('.dataBox'),			//数据父元素
		$setParam = $('.set-param'),		//设置参数父元素
		$hd = $('.dataBox .hd'),			//数据 head
		$bd = $('.dataBox .bd'),			//数据 body
		$addData = $('.add-data'),			//添加 数据按钮
		$delData = $('.del-data'),			//删除 数据按钮
		$btnbox = $('.btnbox'),				//操作按钮父元素
		bd_p = '',							//数据 P 结构
		bd_li = '',							//数据 li	结构
		_pramArr = [],						//参数
		_num;								//条数

	$dataCright.css({height:windowH-120});
	$bd.css({height:windowH-300});
	win.resize(function(){
		var windowH = win.height();
		console.log(windowH);
		$dataCright.css({height:windowH-120});
		$bd.css({height:windowH-300});
	})

	//设置数据条数
	$("#setNumber").Spinner({
		value: 5,
		min: 1,
		max: 1000
	});

	//设置参数
	$addParam.bind('click',function(){
		var _this = $(this);
		_this.prev('.set-param').append('<li><input type="text" class="yui-input"><em></em></li>');
	})

	//删除参数
	$setParam.on('click','em',function(){
		var _this = $(this),
			_paramLen = $setParam.children('li').length;
		if(_paramLen == 1){
			alert('不能再删除啦！ (┬＿┬)')
		}else{
			_this.parent().remove();
		}
	})

	//生成数据结构
	$creatData.bind('click',function(){
		$('.set-param li input').each(function(){
			if($(this).val() !== ''){
				_pramArr.push($(this).val());
			}
		})
		if(_pramArr == ''){
			alert('请设置参数');
			return false;
		}
		console.log(_pramArr)
		_num = $('#setNumber input').val();
		console.log("参数:"+_pramArr,"数据条数:"+_num);

		//输出变量hd
		var hdcon = '';
		for(i = 0;i < _pramArr.length;i++){
			hdcon += '<p>'+ _pramArr[i] +'</p>';
		}
		$hd.prepend(''+
				' <ul> '+
				' <li> '+
				' <p></p>'+ hdcon +'<p></p> '+
				' </li> '+
				'</ul>');

		//输出数据条
		for(i = 0;i < _pramArr.length;i++){
			bd_p += '<p><input type="text" class="yui-input" /></p>';
		}
		for(i = 0;i < _num;i++){
			bd_li += '<li><p>' +(i+1)+ '</p>' + bd_p + '<p><span class="del-data">+</span></p></li>';
		}
		$bd.append('<ul>' + bd_li + '</ul>');
		$creatData.unbind('click');
		$addParam.unbind();
		$btnbox.show();
	})

	//在已生成的数据中  增加
	$addData.on('click',function(){
		var $bdLiLen = $bd.find('ul li').length;
		$bd.children('ul').append('<li><p>' + ($bdLiLen+1) + '</p>' + bd_p + '<p><span class="del-data">+</span></p></li>');
	});

	//在已生成的数据中  删除
	$bd.on('click','.del-data',function(){
		console.log('del')
		var _this = $(this);
		var $bdLiLen = $bd.find('ul li').length;
		_this.parent().parent().remove();
		for(i = 1;i < $bdLiLen;i++){
			$bd.find('ul li').find('p:first').eq(i-1).text(i);
		}
	})


	// 下载文件方法
	var eleTextarea = document.querySelector('.dataBox').innerText;
	var eleButton = document.getElementById('download');

	var funDownload = function (content, filename) {
		var eleLink = document.createElement('a');
		eleLink.download = filename;
		eleLink.style.display = 'none';
		// 字符内容转变成blob地址
		var blob = new Blob([content]);
		eleLink.href = URL.createObjectURL(blob);
		// 触发点击
		document.body.appendChild(eleLink);
		eleLink.click();
		// 然后移除
		document.body.removeChild(eleLink);
	};

	// 生成即将输出的json数据,等待下载
	var jsonData;	//存储json 等待下载
	var newJsonData = function(){
		var r2 = '',		//总数据
			r3,				//每行中输入的数值,这个值是动态的
			newNum;			//新的数据条数，因删除或增加，改变了条数，需重新计算
		newNum = $bd.find('li').length;
		for(i = 0;i < newNum;i++){	//newNum:条数  _paramArr 参数数组
			var r1 ='';
			for(r = 0; r < _pramArr.length;r++){
				r3 = $bd.find('ul li').eq(i).find('input').eq(r).val();
				if(r === _pramArr.length-1){
					r1 += '"'+_pramArr[r]+'":"'+r3+'"';
				}else{
					r1 += '"'+_pramArr[r]+'":"'+r3+'",';
				}
			}
			if(i === newNum-1){
				r2 += '{'+ r1 +'}';
			}else{
				r2 += '{'+ r1 +'},';
			}
		}
		jsonData = '['+ r2 +']'
		console.log(jsonData);
	}

	if ('download' in document.createElement('a')) {
		// 下载json文件
		eleButton.addEventListener('click', function () {
			newJsonData();
			funDownload(jsonData, 'data.json');
		});
	} else {
		eleButton.onclick = function () {
			alert('浏览器不支持');
		};
	}
})
